<template>
	<view class="search-small" :class="[{ show: visible }]" @touchmove.prevent>
		<!--  #ifdef APP-PLUS -->
		<view class="fix-bar"></view>
		<!--  #endif -->
		<view class="search-bar" @tap="toSearch()">
			<image mode="widthFix" class="bg-small" src="@/static/images/index/search-bg-small.png" />
			<image mode="widthFix" class="image" src="@/static/images/index/search-bar.png" />
			<!-- 轮播 -->
			<swiper class="swiper" :autoplay="true" :vertical="true" :interval="3000" :duration="500" :circular="true" :disable-touch="true">
				<template v-if="shareTemplate.length > 0">
					<swiper-item v-for="item in shareTemplate">
						<view class="swiper-item">{{ item }}</view>
					</swiper-item>
				</template>
				<swiper-item v-else>
					<view class="swiper-item">复制淘宝天猫商品，领券下单拿补贴~</view>
				</swiper-item>
			</swiper>
			<view class="search-btn">搜券</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Search',
	props: {
		shareTemplate: {
			type: Array,
			default: () => {
				return [];
			}
		},
		visible: {
			type: Boolean,
			default: () => {
				return false;
			}
		}
	},
	methods: {
		toSearch() {
			if (!this.visible) {
				return false;
			}
			this.$Router.push('/pages/goods/search');
		}
		
	}
};
</script>

<style lang="scss" scoped>
.search-small {
	width: 100%;
	z-index: 1000;
	text-align: center;
	position: fixed;
	top: -4rpx;
	opacity: 0;
	transition: 0.5s;
	@include flexBox(center, center, column);

	&.show {
		opacity: 1;
	}
	
	.fix-bar {
		width: 100%;
		height: 50rpx;
		background: #f70114;
	}

	.search-bar {
		width: 100%;
		height: 150rpx;
		position: relative;
		z-index: 2;
		@include flexBox(space-between, center);
		.bg-small {
			position: absolute;
			width: 100%;
			height: 150rpx;
		}
		.image {
			width: 680rpx;
			height: 93rpx;
			position: absolute;
			left: 50%;
			margin-left: -340rpx;
			top: 50%;
			margin-top: -42rpx;
		}
		.swiper {
			position: absolute;
			top: 34rpx;
			left: 120rpx;
			width: 434rpx;
			height: 93rpx;
			overflow: hidden;
			.swiper-item {
				line-height: 93rpx;
				text-align: left;
				color: #8b8b8b;
				font-size: 24rpx;
				@include ellipsis(1);
			}
		}
		.search-btn {
			line-height: 93rpx;
			padding-top: 8rpx;
			position: absolute;
			right: 28px;
			font-size: 28rpx;
			color: #BE000F;
		}
	}
}
</style>
